<template>
  <div id="app">
    <p>韩梦飞沙-{{ msg }}</p>  
    
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>

  <div id="app2">
    <div v-html="message"></div>
  </div>
  
  {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message2.split('').reverse().join('') }}
  <div v-bind:id="'list-' + id">菜鸟教程</div>


   {{ message3 | capitalize }}



  <div id="app3">
    <ul>
      <li v-bind:id="'list-' + id" ,v-for="(value, key) in object">
        {{ key }} : {{ value }}
      </li>
    </ul>
    
  <button v-on:click="say('hi')">Say hi 韩梦飞沙</button>
  <button @click="say('what')">Say what  韩梦飞沙</button>

  </div>


  </div>
</template>
<script>
export default {
  name: 'app',
/*  这样不行。 
 data: {
      msg: 'Welcome to Your Vue.js App 欢迎来到你的 vue.js 应用'
    }, */
  data() {
    return {   
      msg: 'Welcome to Your Vue.js App 欢迎来到你的 vue.js 应用',
      class1: false,
      message: '<h1>菜鸟教程-韩梦飞沙  html 会格式化显示出尖括号的html标签</h1>',
      ok: true,
      message2: '韩梦飞沙',
      id: 1,
      message3: 's韩梦飞沙 第一个字母变大写s',
      object: {
        name: '菜鸟教程',
        url: 'http://www.runoob.com',
        slogan: '学的不仅是技术，更是梦想！'
      }
    }
  },
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  methods: {
    say: function(message) {
      alert(message)
    }
  }
  }
/*  不行
  new Vue({
  el: '#app2',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
}) */
/* 这样不行。
 new Vue({
  el: '#app',
  data: {
    class1: false
  }
}); */
</script>
<style>
.class1 {
  background: #444;
  color: #eee;
}
</style>
/*    build	最终发布的代码存放位置。
      config	配置目录，包括端口号等。我们初学可以使用默认的。
      node_modules	npm 加载的项目依赖模块
      src	  这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
      assets: 放置一些图片，如logo等。
      components: 目录里面放了一个组件文件，可以不用。
      App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
      main.js: 项目的核心文件。
      static 静态资源目录，如图片、字体等。
      test	初始测试目录，可删除.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
      index.html	首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
      package.json	项目配置文件。
      README.md	项目的说明文档，markdown 格式 */